<template>
  <ul class="list">
    <li class="item" v-for="(item,i) in projectArr" :key="i">
      <div class="lf">
        <img v-if="imgUrl" :src="imgUrl+item.project_image" alt />
      </div>
      <div class="rt">
        <div class="projectname">{{item.project_name}}</div>
        <div class="hospital">
          <span class="hosname">{{item.hospital_name}}</span>
          <span>{{item.distance}}km</span>
        </div>
        <div class="bottom">
          <div class="price">
            <span class="yang">¥</span>
            {{item.appointment_price}}
          </div>
          <div class="choice" @click="goConfirmAppoint(item)">选择</div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  props: {
    projectArr: [],
    ticket_id:""
  },
  data() {
    return {
      imgUrl: common.image_response //http图片
    };
  },
  methods: {
    // 点击选择->邀请有礼确认预约
    goConfirmAppoint(item) {
      wx.navigateTo({
        url: `/pages/package_projects/confirm_appoint/main?ticket_id=${this.ticket_id}&project_id=${item.project_id}`
      });
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  display: block;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.item {
  margin: 10px 10px 0;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  display: flex;
  box-sizing: border-box;
  .lf {
    flex-shrink: 0;
    width: 114px;
    height: 114px;
    border-radius: 6px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
  .rt {
    flex: 7;
    position: relative;
    .projectname {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .hospital {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 16px;
      .hosname {
        width: 66%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .bottom {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        line-height: 20px;
        .yang {
          font-size: 12px;
        }
      }
      .choice {
        padding: 2px 8px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        border-radius: 25px 25px 25px 25px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
      }
    }
  }
}
</style>